import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_base/base/widget/base_get_builder.dart';
import 'package:flutter_base/widgets/appbar/common_app_bar.dart';
import 'package:flutter_base/config/app_color.dart';
import 'package:flutter_base/widgets/widget_line.dart';
import 'account_settings_logic.dart';

class AccountSettingsPage extends StatelessWidget {
  final logic = Get.put(AccountSettingsLogic());

  AccountSettingsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return BaseGetBuilder<AccountSettingsLogic>(
      appBar: CommonAppBar(
        title: 'Account Settings',
        showLeft: true,
      ),
      backgroundColor: AppColor.colorF5F7FA, // 使用与Figma设计图匹配的背景色
      builder: (controller) {
        return SingleChildScrollView(
          physics: const BouncingScrollPhysics(),
          child: Column(
            children: [
              SizedBox(height: 20.w),
              _buildAccountSettingsCard(controller),
            ],
          ),
        );
      },
    );
  }

  // 账号设置卡片
  Widget _buildAccountSettingsCard(AccountSettingsLogic controller) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 16.w),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(20.w),
      ),
      child: Column(
        children: [
          // 绑定手机
          _buildPhoneItem(controller),
          WidgetLine(height: 0.5),
          
          // 绑定邮箱
          _buildEmailItem(controller),
          WidgetLine(height: 0.5),
          
          // 绑定微信
          _buildWeChatItem(controller),
          WidgetLine(height: 0.5),
          
          // 绑定QQ
          _buildQQItem(controller),
        ],
      ),
    );
  }

  // 手机绑定项
  Widget _buildPhoneItem(AccountSettingsLogic controller) {
    return Obx(() => _buildBindingItem(
      'Bind Phone',
      controller.phoneNumber.value,
      onTap: () => controller.onBindPhoneTap(),
    ));
  }

  // 邮箱绑定项
  Widget _buildEmailItem(AccountSettingsLogic controller) {
    return Obx(() => _buildBindingItem(
      'Bind Email',
      controller.email.value,
      onTap: () => controller.onBindEmailTap(),
    ));
  }

  // 微信绑定项
  Widget _buildWeChatItem(AccountSettingsLogic controller) {
    return Obx(() => _buildBindingItem(
      'Bind WeChat',
      controller.isWeChatBound.value ? 'Bound' : 'Not Bound',
      onTap: () => controller.onBindWeChatTap(),
      isNotBound: !controller.isWeChatBound.value,
    ));
  }

  // QQ绑定项
  Widget _buildQQItem(AccountSettingsLogic controller) {
    return Obx(() => _buildBindingItem(
      'QQ Binding',
      controller.isQQBound.value ? 'Bound' : 'Not Bound',
      onTap: () => controller.onBindQQTap(),
      isNotBound: !controller.isQQBound.value,
    ));
  }

  // 绑定项
  Widget _buildBindingItem(
    String title,
    String value, {
    required VoidCallback onTap,
    bool isNotBound = false,
  }) {
    return InkWell(
      onTap: onTap,
      child: Container(
        height: 40.w,
        padding: EdgeInsets.symmetric(horizontal: 16.w),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              title,
              style: TextStyle(
                fontSize: 14.sp,
                fontWeight: FontWeight.w600,
                fontFamily: 'Outfit',
                color: AppColor.color0C0A09,
              ),
            ),
            Row(
              children: [
                Text(
                  value,
                  style: TextStyle(
                    fontSize: 12.sp,
                    fontWeight: FontWeight.w400,
                    fontFamily: 'Outfit',
                    color: isNotBound
                        ? AppColor.colorFF4D00 // 未绑定显示橙色
                        : AppColor.color0C0A09.withOpacity(0.16), // 已绑定显示灰色
                  ),
                ),
                SizedBox(width: 4.w),
                Icon(
                  Icons.keyboard_arrow_right,
                  size: 20.w,
                  color: AppColor.color333333.withOpacity(0.5),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
} 